<template>
  <div v-if="roles === 'student'">
    <div class="dashboard-container">
      <el-col :span="10">
        <!-- 个人信息显示 -->
        <el-card class="box-card" >
          <!-- 头像 -->
          <img style="width: 178px;height: 178px" v-if="avatar" :src="avatar" class="avatar">
          <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
          <el-form :model="user" label-position="left" label-width="60px">
            <el-form-item label="学号">
              <el-input v-model="user.stu_num" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="user.name" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-input v-model="user.sex" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label="出生日期">
              <template #label>
                <span style="font-size: 12px">出生日期</span>
              </template>
              <el-input v-model="formattedBirth" style="width: 200px" readonly></el-input>
            </el-form-item>
            <el-form-item label="年级">
              <el-input v-model="user.grade" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label="学院">
              <el-input v-model="user.faculty" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label="班级">
              <el-input v-model="user.clazz" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label="电话">
              <el-input v-model="user.phone" style="width: 200px"></el-input>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <!-- 住宿信息显示 -->
      <el-col :span="13">
        <el-card class="box-card" style=" height: 370px;">
          <el-form :model="accommodation" label-position="left" label-width="80px">
            <el-form-item label="楼栋">
              <el-input v-model="accommodation.building" style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="层数">
              <el-input v-model="accommodation.floor" style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="宿舍号">
              <el-input v-model="accommodation.room" style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="居住时间">
              <el-input v-model="accommodation.residenceTime" style="width: 150px"></el-input>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </div>
    <div class="password-card" >
          <el-card class="box-card" style="width: 290px;  "> 
            <el-input placeholder="请输入原始密码" v-model="originalPassword" show-password
                    style="margin-top: 6px"></el-input>
            <div style="margin-top: 6px">修改密码：</div>
            <el-input v-model="bePassword1" show-password style="margin-top: 6px"></el-input>
            <div style="margin-top: 6px">重复密码：</div>
            <el-input style="margin-top: 6px" v-model="bePassword2" show-password></el-input>
            <div style="width: 100%;text-align: center;margin-top: 6px">
              <el-button type="warning" @click="cancelPassword">取消</el-button>
              <el-button type="success" @click="updatePassword" :loading="updatePasswordLoading">修改</el-button>
            </div>
          </el-card>
        </div>
  </div>
  <div v-else-if="roles === 'admin'">
    <div class="dashboard-container">
      <el-col :span="10">
        <!-- 个人信息显示 -->
        <el-card class="box-card" style="width: 500px; height: 600px;">
          <!-- 头像 -->
          <img style="width: 178px; height: 178px" v-if="avatar" :src="avatar" class="avatar">
          <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
          <el-form :model="user" abel-position="left" label-width="50px" style="margin-top: 20px;">
            <el-form-item label="工号">
              <el-input v-model="user.admin_num" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="user.name" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-input v-model="user.sex" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label="电话">
              <el-input v-model="user.phone" style="width: 200px"></el-input>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="13">
        <el-card class="box-card" style=" height: 370px;">
          <el-form :model="accommodation" label-position="left" label-width="80px">
            <h2>管理的楼栋</h2>
            <el-form-item label="楼栋">
              <el-input v-model="floor.building" style="width: 150px;margin-top: 6px"></el-input>
            </el-form-item>
            <el-form-item label="层数">
              <el-input v-model="floor.floor" style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="房间数">
              <el-input v-model="floor.room" style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="类型">
              <el-input v-model="floor.category" style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="居住性别">
              <el-input v-model="floor.sex" style="width: 150px"></el-input>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
        <div class="password-card" >
          <el-card class="box-card" style="width: 300px; "> 
            <el-input placeholder="请输入原始密码" v-model="originalPassword" show-password
                    style="margin-top: 6px"></el-input>
            <div style="margin-top: 6px">修改密码：</div>
            <el-input v-model="bePassword1" show-password style="margin-top: 6px"></el-input>
            <div style="margin-top: 6px">重复密码：</div>
            <el-input style="margin-top: 6px" v-model="bePassword2" show-password></el-input>
            <div style="width: 100%;text-align: center;margin-top: 6px">
              <el-button type="warning" @click="cancelPassword">取消</el-button>
              <el-button type="success" @click="updatePassword" :loading="updatePasswordLoading">修改</el-button>
            </div>
          </el-card>

        </div>
    </div>


  </div>
  <div v-else-if="roles === 'superadmin'">
    <div class="dashboard-container">
      <el-col :span="10">
        <!-- 个人信息显示 -->
        <el-card class="box-card" style="width: 500px; height: 600px;">
          <!-- 头像 -->
          <img style="width: 178px; height: 178px" v-if="avatar" :src="avatar" class="avatar">
          <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
          <el-form :model="user" abel-position="left" label-width="50px" style="margin-top: 20px;">
            <el-form-item label="姓名">
              <el-input v-model="name" style="width: 200px"></el-input>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </div>


  </div>
</template>


<script>
import { mapGetters } from 'vuex'
import axios from 'axios'
import moment from 'moment';
import { getToken} from '@/utils/auth'
import Vue from 'vue'
import Router from 'vue-router'
import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'

Vue.use(Router)
Vue.use(ElementUI)


export default {
  name: 'Dashboard',

  computed: {
    ...mapGetters(['name', 'user', 'avatar', "roles",'Token']),
    formattedBirth() {
      // 使用 moment.js 将日期格式化为年月日格式
      return moment(this.user.birth).format('YYYY-MM-DD');
    },
    roles() {
      // 假设你从 Vuex 的 getters 中获取 roles
      return this.$store.getters.roles;
    },
    token(){
      return state.user.token
    }
  },
  data() {
    return {
      accommodation: {
        building: '',
        floor: null,
        room: '',
        residenceTime: ''
      },
      floor: {
        building: '',
        floor: null,
        room: '',
        sex: '',
        category: ''
      },
      floor_num: '', // 添加floor_num属性的声明
      layer: '',
      room_num: '',
      time: '',
      birth: '',
      admin_num: '',
      layer_amount: '',
      room_amount: '',
      category: '',
      sex: '',
      bePassword1: '',
      bePassword2: '',
      originalPassword:'',
      updatePasswordLoading: false
    }
  },

  methods: {
    cancelPassword() {
      this.bePassword1 = '';
      this.bePassword2 = '';
      this.originalPassword = '';
      this.updatePasswordLoading = false;
    },
    async updatePassword() {
  if (this.bePassword1 === this.bePassword2) {
    this.updatePasswordLoading = true;
    const data = {
      oldPassword: this.originalPassword,
      newPassword: this.bePassword1,
      roles: this.roles,
      token: getToken()
    };

    try {
      const response = await axios.post('http://localhost:9090/user/updatePassword', data);
      this.originalPassword = '';
      this.bePassword1 = '';
      this.bePassword2 = '';
      this.updatePasswordLoading = false;

      if (response.data.code === 200) {
        this.$message({
          message: '密码修改成功',
          type: 'success'
        });

        // 注销用户
        await this.$store.dispatch('user/logout');
        // 清除 Token
        localStorage.removeItem('token');

        // 路由重定向到登录页面
        this.$router.replace('/login');
      } else {
        // 处理密码不匹配的错误或显示错误信息
        this.$message.error(response.data.message);
      }
    } catch (error) {
      console.error(error);
      // 处理请求错误的逻辑或显示错误信息
    }
  }
}

,
    fetchStayinfo(stu_num) {
      axios.get('http://localhost:9090/Stayinfo', {
        params: {
          stu_num: stu_num
        }
      })
        .then(response => {
          // 在这里处理返回的居住信息数据
          const stayinfoList = response.data;
          if (stayinfoList.length > 0) {
            const stayinfo = stayinfoList[0]; // 假设只获取第一个住宿信息
            this.accommodation.building = stayinfo.floor_num || ''; // 使用空字符串作为默认值
            this.accommodation.floor = stayinfo.layer || null; // 使用null作为默认值
            this.accommodation.room = stayinfo.room_num || ''; // 使用空字符串作为默认值
            this.accommodation.residenceTime = stayinfo.time || ''; // 使用空字符串作为默认值
          }
        })
        .catch(error => {
          // 处理请求错误
          console.error(error);
        });
    },
    fetchadmininfo(admin_num) {
      axios
        .get('http://localhost:9090/Floor', {
          params: {
            admin_num: admin_num,
          },
        })
        .then((response) => {
          const floorList = response.data;
          if (floorList.length > 0) {
            const floor = floorList[0];
            this.floor.building = floor.floor_num || '';
            this.floor.floor = floor.layer_amount || null;
            this.floor.room = floor.room_amount || '';
            this.floor.category = floor.category || '';
            this.floor.sex = floor.sex || '';
          }
        })
        .catch((error) => {
          console.error(error);
        });
    },
  },
  mounted() {
    if (this.roles.includes('student')) {
      this.fetchStayinfo(this.user.stu_num);
    } else if (this.roles.includes('admin')) {
      this.fetchadmininfo(this.user.admin_num);
    }
  },

}

</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}


.accommodation-card {
  width: 100%;
}


.box-card {
  padding: 20px;
  margin-bottom: 20px;
}

.avatar {
  margin-bottom: 20px;
}

.password-card {
  width: 300px;
  position: absolute;
  right: 20px;
  bottom: 20px;
  overflow-y: auto;
}

.password-card .box-card {
  padding: 0px;
}
.dashboard-container {
  display: flex;
  justify-content: space-between;
}




</style>
